// 导入自己定义的 request 工具库
const { xhlGet } = require('../../utils/request')
const { randomNum } = require('../../utils/util')

Page({
 
  data: {
    // 轮播图列表
    bannerList: [],
    // 商品列表
    goodsList: [],
    // 当前是第几页
    currentPage: 1,
    // 一页多少条数据
    pagesize: 6,
    // 一共多少页
    totalPage: 3,
    // 下拉刷新开关
    refershing: false
  },

  // 获取轮播图列表的函数
  getSwiperListHandler() {
    xhlGet('/banners')
      .then(res => this.setData({ bannerList: res }))
  },

  // 获取商品列表的函数
  getGoodsListHandler() {
    xhlGet('/goods', { _page: this.data.currentPage, _limit: this.data.pagesize })
      .then(res => {
        // 这样没办法实现加载更多
        // this.setData({ 
        //   goodsList: res,
        //   refershing: false
        // })

        // 让现在的 goodsList 和 res 合并
        this.setData({ 
          goodsList: this.data.goodsList.concat(res),
          refershing: false
        })

      })
  },

  // 刷新当前内容的事件处理函数
  updateGoodsListHandler() {
    // 把 data 内的 currentPage 变成一个 随机数字
    // 随机数字的范围  1 ~ totalPage 之间
    this.setData({ 
      currentPage: randomNum(1, this.data.totalPage),
      // 为了刷新使用
      goodsList: []
    })

    // 再次请求 goods 列表( 执行 getGoodsListHandler 函数 )
    this.getGoodsListHandler()
  },

  // 打开页面就会执行的生命周期函数
  onLoad(options) {
    // 打开页面就需要发送请求, 请求轮播图数据
    this.getSwiperListHandler()
    // 打开页面就需要发送请求, 请求商品列表数据
    this.getGoodsListHandler()
  },

  // 页面上滑触底会执行的生命周期函数
  onReachBottom() {
    // 先把不加载的情况触发
    if(this.data.currentPage >= this.data.totalPage) return

    // 代码能执行到这里, 说明还有下一页
    this.setData({ currentPage: this.data.currentPage + 1 })

    // 重新请求一波数据
    this.getGoodsListHandler()
  }
})

/* 商品列表内容 
  + 分析功能
    1. 打开页面需要展示 ( 需要请求数据回来渲染 )
    2. 下拉刷新 ( 请求数据回来渲染 )
    3. 上滑加载更多 ( 请求数据回来渲染 )
  + 分析请求内容
    1. 第一页       /goods      _page=1
    2. 随机一页     /goods      _page=随机数字
    3. 下一页       /goods      _page=当前页+1
  + 实现的时候
    => 需要定义两个变量
      -> currentPage
      -> limit
    => 还需要一个变量
      -> totalPage
    => 书写一个请求的函数
  + 出现一个 bug
    => 我的 getGoodsList 里面执行的是请求数据列表
      -> 赋值给 data 内的 goodsList 变量
      -> this.setData({ goodsList: res })
    => this.setData({ goodsList: res }) 的意义
      -> 不管原先 data 内的 goodsList 是什么
      -> 都用现在的替换
    => 我们要出现的加载更多的事情
      -> 把现在这个数组追加到原先的数组内部
  + 解决: 
    1. 把 getGoodsList 内的赋值操作修改
      1-1. 把请求回来的数组和现在的 goodsList 合并
      1-2. 把合并后的数组赋值给 goodsList
    2. 当你触发下拉刷新效果的时候
      2-1. 先把目前的 goodsList 变成一个 空数组
*/